<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性用法</title>
    </head>
    <body>
        <div id="app">
            总价：{{ prices }}
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    package1:[
                        {
                            name: 'iPhone 7',
                            price: '7199',
                            count: 2
                        },
                        {
                            name: 'iPad',
                            price: 2888,
                            count: 1
                        }
                    ],
                    package2:[
                        {
                            name: 'apple',
                            price: 3,
                            count: 5
                        },
                        {
                            name: 'banana',
                            price: 2,
                            count: 10
                        }
                    ]
                },
                computed: {
                    prices: function (){
                        var prices = 0;
                        for (var i = 0;i<this.package1.length;i++){
                            prices += this.package1[i].price*this.package1[i].count;
                        }
                        for (var i = 0;i<this.package2.length;i++){
                            prices += this.package2[i].price*this.package2[i].count;
                        }
                        return prices;
                    }
                }
            })
        </script>
    </body>
</html>